<!--出库界面-->
<template>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="7" :offset="0">
                <el-input v-model="queryForm.query" placeholder="查找的货品号" />
            </el-col>
            <el-button type="primary" size="default" icon="ele-Right" style="margin: 1px 0px" @click="initGetStorage">搜索
            </el-button>
        </el-row>
    </el-card>
    <el-button type="primary" size="default" icon="ele-Plus" style="margin: 10px 1px" @click="handleDialog">添加
    </el-button>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="outid" label="出库信息id" width="80" text-align="content-center"/>
        <el-table-column prop="out_time" label="出库时间" width="180" text-align="content-center" />
        <el-table-column prop="category" label="商品类别" />
        <el-table-column prop="num" label="出库商品数量/箱" />
        <el-table-column prop="oid" label="订单号" />
        <el-table-column prop="tons" label="出库吨数" />
        <el-table-column prop="fee" label="堆存费" />
        <el-table-column prop="text" label="备注" />
        <el-table-column prop="" label="操作" width="180" #default = {row}>

            <el-button type="primary" icon="ele-Edit" size="small" @click = "initupdate(row)">编辑</el-button>

            <el-button type="danger" icon="ele-Delete" size="small" @click="initdel(row)">删除</el-button>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="添加商品">
        <el-form :model="form">
            <el-form-item label="出库信息编号" :label-width="formLabelWidth">
                <el-input v-model="form.outid" />
            </el-form-item>
            <el-form-item label="商品类别" :label-width="formLabelWidth">
                <el-input v-model="form.category" />
            </el-form-item>
            <el-form-item label="货物数量" :label-width="formLabelWidth">
                <el-input v-model="form.num" />
            </el-form-item>
            <el-form-item label="货物质量" :label-width="formLabelWidth">
                <el-input v-model="form.tons" />
            </el-form-item>
            <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="form.oid" />
            </el-form-item>
            <el-form-item label="入库时间" :label-width="formLabelWidth">
                <el-date-picker v-model="form.out_time" type="date" placeholder="选择时间" size="default" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleDialog">取消</el-button>
                <el-button type="primary" @click="initaddstorage">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="update" title="添加预约出库信息">
        <el-form :model="form">
            <el-form-item label="出库信息编号" :label-width="formLabelWidth">
                <el-input v-model="form.outid" disabled="true"/>
            </el-form-item>
            <el-form-item label="商品类别" :label-width="formLabelWidth">
                <el-input v-model="form.category" />
            </el-form-item>
            <el-form-item label="货物数量" :label-width="formLabelWidth">
                <el-input v-model="form.num" />
            </el-form-item>
            <el-form-item label="货物质量" :label-width="formLabelWidth">
                <el-input v-model="form.tons" />
            </el-form-item>
            <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="form.oid" />
            </el-form-item>
            <el-form-item label="出库时间" :label-width="formLabelWidth">
                <el-date-picker v-model="form.out_time" type="date" placeholder="选择时间" size="default"  />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="update = false">取消</el-button>
                <el-button type="primary" @click="updatestorage">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dele" title="删除信息" width="30%">
		<span>将永久删除该信息且无法撤销该操作是否确认？</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dele = false">取消</el-button>
				<el-button type="primary" @click="deletestorage">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { getOutStorage, addOutStorage, upOutStorage, delOutStorage } from '/@/api/out';
export default defineComponent({
    name: 'outstorage',
    setup() {
        const queryForm = reactive({
            pagenum: 1,
            pagesize: 1000,
            query: '',
        });

        const tableData = ref([]); //表格数据

        const dialogFormVisible = ref(false);//添加表单的开关,

        const update = ref(false)//更新表单的开关

        const dele = ref(false)
        const handleDialog = () => {
            //点击添加之后触发的方法
            dialogFormVisible.value = !dialogFormVisible.value
        };

        const initGetStorage = async () => {
            //获取入库信息
            const res = await getOutStorage(queryForm)
            tableData.value = res.data.value
        };

        initGetStorage()
        const initaddstorage = () => {//添加入库信息的函数
            form.num = Number(form.num)
            form.tons = Number(form.tons)
            addOutStorage(form).then(initGetStorage)
            
            dialogFormVisible.value = !dialogFormVisible.value
        }
        const initupdate = (row: any)=>{
            form.outid = row.outid
            form.out_time = row.out_time
            form.oid = row.oid
            form.num = row.num
            form.category = row.category
            form.tons = row.tons
            update.value = true
        }

        const updatestorage = async()=>{
            form.num = Number(form.num)
            form.tons = Number(form.tons)
             upOutStorage(form).then(initGetStorage)
             update.value=false
        }

        const initdel = (row: any)=>{
            form.outid = row.outid
            form.out_time = row.out_time
            form.oid = row.oid
            form.num = row.num
            form.category = row.category
            form.tons = row.tons
            dele.value = true
        }
        const deletestorage = ()=>{
            delOutStorage(form).then(initGetStorage)
            dele.value = false
        }
        const form = reactive({
            outid: '',
            num: 0,
            out_time: '',
            tons: 0,
            oid:'',
            category: ''
        })
        const formLabelWidth = '140px';//表单标签宽度
        return {
            queryForm,
            tableData,
            dialogFormVisible,
            formLabelWidth,
            form,
            update,
            dele,
            handleDialog,
            initGetStorage,
            initaddstorage,
            initupdate,
            initdel,
            updatestorage,
            deletestorage
        }
    },
});
</script>

<style lang="scss" scoped>
</style>
